<!--
 * @Author: your name
 * @Date: 2020-02-17 10:19:09
 * @LastEditTime: 2020-07-17 17:27:14
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \boot_vue\src\views\modules\sys\log-error.vue
 异常记录列表
 -->
<template>
  <div class="aui-card--fill scroll-box card-box">
    <div class="mod-sys__log-error pane-shell">
      <el-form :inline="true"
               :model="dataForm"
               @keyup.enter.native="getDataList()">
        <el-form-item>
          <el-date-picker v-model.trim="date"
                          type="datetimerange"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <!-- v-if="$hasPermission('system:sysLogError:page')" -->
          <el-button type="primary"
                     @click="search()">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     plain
                     v-if="$hasPermission('system:sysLogError:export')"
                     @click="exportHandle()">{{ $t('export') }}</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="dataListLoading"
                :data="dataList"
                border
                @sort-change="dataListSortChangeHandle"
                style="width: 100%;">
        <el-table-column prop="requestUri"
                         :label="$t('logError.requestUri')"
                         header-align="center"
                         width="250"
                         :show-overflow-tooltip="true"
                         align="center"></el-table-column>
        <el-table-column prop="requestMethod"
                         :label="$t('logError.requestMethod')"
                         header-align="center"
                         align="center"></el-table-column>
        <el-table-column prop="requestParams"
                         :label="$t('logError.requestParams')"
                         header-align="center"
                         align="center"
                         width="150"
                         :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="ip"
                         :label="$t('logError.ip')"
                         header-align="center"
                         align="center"></el-table-column>
        <el-table-column prop="userAgent"
                         :label="$t('logError.userAgent')"
                         header-align="center"
                         align="center"
                         width="150"
                         :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="createDate"
                         :label="$t('logError.createDate')"
                         sortable="custom"
                         header-align="center"
                         align="center"
                         width="180"></el-table-column>
        <el-table-column :label="$t('handle')"
                         fixed="right"
                         header-align="center"
                         align="center"
                         width="150">
          <template slot-scope="scope">
            <el-button type="text"
                       size="small"
                       @click="infoHandle(scope.row.errorInfo)">{{ $t('logError.errorInfo') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :current-page="page"
                     :page-sizes="[10, 20, 50, 100]"
                     :total="total"
                     layout="total, sizes, prev, pager, next"
                     @size-change="pageSizeChangeHandle"
                     @current-change="pageCurrentChangeHandle">
      </el-pagination>
    </div>

    <!-- 错误信息弹窗 -->
    <el-dialog v-if="dialogVisible"
               :visible.sync="dialogVisible"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               :modal="false"
               :fullscreen="true"
               class="user-dialog error-dialog"
               width="90%"
               :before-close="handleClose">
      <div class="msg"
           element-loading-text="异常信息加载中..."
           v-loading="!isCode">
        <div slot="title">
          <el-page-header @back="handleClose"
                          content="异常信息">
          </el-page-header>
        </div>
        <pre v-highlightA
             v-if="isCode"
             class="margin-0">
            <code>{{errorInfo}}</code>
        </pre>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      dialogVisible: false,
      errorInfo: '',
      isCode: false,
      date: '',
      mixinViewModuleOptions: {
        getDataListURL: '/system/sysLogError/page',
        getDataListIsPage: true,
        exportURL: '/system/sysLogError/export'
      }
    }
  },
  watch: {
    dialogVisible (val) {
      if (val) {
        setTimeout(() => {
          this.isCode = val
        }, 100)
      }
    }
  },
  methods: {
    // 异常信息
    infoHandle (info) {
      this.errorInfo = info
      this.dialogVisible = true
    },
    // 关闭弹窗
    handleClose () {
      this.dialogVisible = false
      this.isCode = false
    },
    // 查询
    search () {
      if (this.date !== null) {
        this.dataForm.startTime = this.date[0]
        this.dataForm.endTime = this.date[1]
      } else {
        this.dataForm.startTime = ''
        this.dataForm.endTime = ''
      }
      this.getPageInit()
    }
  }
}
</script>

<style lang="scss">
.customClass-msg-box {
  width: 80%;
  height: 100%;
  overflow: auto;
}
.msg {
  height: 100%;
}
</style>
